import React, { useEffect } from "react";
import { Button, Drawer, Form, Input, Spin } from "antd";
import { useProjectModal, useProjectsQueryKey } from "./util";
import UserSelect from "../../components/userSelect";
import { useAddProject, useEditProject } from "../../utils/project";
import { ErrorBox } from "../../components/lib";
import styled from "@emotion/styled";

export default function ProjectModel() {
  const { projectModalOpen, close, isLoading, editingProject } =
    useProjectModal();
  const useMutateProject = editingProject ? useEditProject : useAddProject;
  const title = editingProject ? "编辑项目" : "创建项目";

  const {
    mutateAsync,
    error,
    isLoading: mutateLoading,
  } = useMutateProject(useProjectsQueryKey());

  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    mutateAsync({ ...editingProject, ...values }).then(() => {
      onClose();
    });
  };
  const onClose = () => {
    form.resetFields();
    close();
  };

  useEffect(() => {
    form.setFieldsValue(editingProject);
  }, [editingProject, form]);

  return (
    <Drawer
      forceRender={true}
      onClose={onClose}
      open={projectModalOpen}
      width={"100%"}
    >
      <Container>
        {isLoading ? (
          <Spin size={"large"} />
        ) : (
          <>
            <h1>{title}</h1>
            <ErrorBox error={error} />
            <Form
              form={form}
              layout={"vertical"}
              style={{ width: "40rem" }}
              onFinish={onFinish}
            >
              <Form.Item
                name="name"
                rules={[{ required: true, message: "请输入项目名" }]}
                label={"名称"}
              >
                <Input placeholder="请输入项目名称" />
              </Form.Item>
              <Form.Item
                name="organization"
                label={"部门"}
                rules={[{ required: true, message: "请输入部门名" }]}
              >
                <Input placeholder="请输入部门名" />
              </Form.Item>
              <Form.Item name="personId" label={"负责人"}>
                <UserSelect defaultOptionName={"负责人"} />
              </Form.Item>
              <Form.Item style={{ textAlign: "right" }}>
                <Button
                  loading={mutateLoading}
                  typeof={"primary"}
                  htmlType={"submit"}
                >
                  提交
                </Button>
              </Form.Item>
            </Form>
          </>
        )}
      </Container>
      {/*<Button onClick={close}>关闭</Button>*/}
    </Drawer>
  );
}

// const dispatch = useDispatch();
// const projectModelOpen = useSelector(selectProjectModelOpen);
// const close = () => dispatch(projectListActions.closeProjectModal());
// return (
//   <Drawer onClose={close} open={projectModelOpen} width={"100%"}>
//     <h1>ProjectModel</h1>
//     <Button onClick={close}>关闭</Button>
//   </Drawer>
// );

// const dispatch = useDispatch();
// const projectModelOpen = useSelector(selectProjectModelOpen);
// const close = () => dispatch(projectListActions.closeProjectModal())

const Container = styled.div`
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
`;
